<!--  这里是第一行的数据  -->
<template>
  <!-- 这里是 html 部分 -->
  <div class="rowOne">
    <!-- 这里是 第一行的最外层盒子 -->
    <div class="box" id="诚信注册企业总数">
      <!-- 这里是 第一行第一列的盒子 -->
      <!-- 这个盒子是用来放下拉选择框的 -->
      <div
        class="mySelect"
        style="
          position: absolute;
          width: 110px;
          top: 50px;
          right: 5px;
          z-index: 9;
        "
      >
        <!-- 这个盒子是用来放下拉选择框的 -->
        <el-select v-model="value" placeholder="请选择年份">
          <!-- 这个是下拉选择框 -->
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
          <!-- 这个是下拉选择框的选项 -->
        </el-select>
      </div>
      <div class="col_1 echarts" id="row1_col_1"></div>
      <!-- 这里是 第一行第一列用来放 echarts 的盒子 -->
    </div>
    <div class="box">
      <!-- 这里是 第一行第二列的盒子 -->
      <div class="col_2 echarts" id="row1_col_2"></div>
      <!-- 这里是 第一行第二列用来放 echarts 的盒子 -->
    </div>
    <div class="box">
      <!-- 这里是 第一行第三列的盒子 -->
      <div class="col_3 echarts" id="row1_col_3"></div>
      <!-- 这里是 第一行第三列用来放 echarts 的盒子 -->
    </div>
  </div>
</template>

<script>
// 引入 echarts 才可以使用
import * as echarts from "echarts";
export default {
  // 当前 vue 文件的 名称
  name: "row1",
  // 当前页面可以使用的数据
  data() {
    return {
      // 这个是 下拉框可以选择的数据 label 是显示的文字  value 是你选则好了 会存到 value 里
      // value为选中时的值  你想想咱们是不是要王后端传年份进行查询丫  所以 选中的值应该为你要传递的值
      // value 不能为空  不能重复  所以全部咱们可以随便给一个  一会做判断
      options: [
        {
          value: 0,
          label: "全部年份",
        },
        {
          value: 2015,
          label: "2015",
        },
        {
          value: 2016,
          label: "2016",
        },
        {
          value: 2017,
          label: "2017",
        },
        {
          value: 2018,
          label: "2018",
        },
        {
          value: 2019,
          label: "2019",
        },
        {
          value: 2020,
          label: "2020",
        },
        {
          value: 2021,
          label: "2021",
        },
        {
          value: 2022,
          label: "2022",
        },
        {
          value: 2023,
          label: "2023",
        },
        {
          value: 2024,
          label: "2024",
        },
        {
          value: 2025,
          label: "2025",
        },
        {
          value: 2026,
          label: "2026",
        },
        {
          value: 2027,
          label: "2027",
        },
        {
          value: 2028,
          label: "2028",
        },
        {
          value: 2029,
          label: "2029",
        },
        {
          value: 2030,
          label: "2030",
        },
        {
          value: 2031,
          label: "2031",
        },
        {
          value: 2032,
          label: "2032",
        },
        {
          value: 2033,
          label: "2033",
        },
        {
          value: 2034,
          label: "2034",
        },
        {
          value: 2035,
          label: "2035",
        },
      ],
      // 这个是用来存 选中项的 value
      value: 0,
      // 这个是用来记录次数的  可以整除2的时候为透明色  不可以整除2的时候为自己定的颜色 起到一个状态作用
      colorFlage: 0,
    };
  },
  // 这里写监听器 监听它的变化
  watch: {
    'value': {  // 监听 value 当他发生变化的时候打印变化后的值  加引号  不加引号是变量
      handler(newVal, oldVal) { //   固定语法 两个形参 第一个变化后的值  第二个变化钱的值
        console.log(newVal, oldVal); 
        // 这里咱们就可以的到他变化 并且得到咱们要传给后端的值 newVal
        // 当变化的时候咱们执行渲染的方法
        this.rendering()
      },
      // immediate: true  // 开启页面加载就执行  这样 页面加载 为 0 的时候也会执行
    }
  },
  // 这个是这个页面一加载就会执行这个 mounted 函数
  mounted() {
    // 执行下面这个函数，用来渲染第一行第一列的
    // 第一个参数 document.querySelector('#rowOne_col_1') 是 echart 要放到哪里
    // 第二个参数是要显示的标题
    this.getCol1_1_1(
      document.querySelector("#row1_col_1"),
      "1.1黑名单综合统计分析-行业折线图(家)"
    );
    // 执行下面这个函数，用来渲染第一行第二列的
    this.getCol2(
      document.querySelector("#row1_col_2"),
      "1.2诚信企业注册-市级柱状图(家)"
    );

    // 执行下面这个函数，用来渲染第一行第三列的
    this.getCol3(
      document.querySelector("#row1_col_3"),
      "1.3诚信企业注册-行业折线图(家)"
    );
  },
  // 这里面就是一些方法 就好比你写的是 (function() {})() 立即执行函数 不用调用就自己执行了
  // 但是下面这种只有调用才会执行 在 mounted 里调用 页面加载完就调方法然后拿数据
  methods: {
    // 渲染什么
    async rendering() {
      // 接口全年  http://121.28.100.35:8192/cxrd/dsjAction.zcndSelect.do
      // 接口月  http://121.28.100.35:8192/cxrd/dsjAction.cxndzcSelect.do
      // let url
      if (this.value === 0) {  // 获取全年
        this.getCol1_1_1(document.querySelector("#row1_col_1"),"1.1黑名单综合统计分析-行业折线图(家)")
      } else { // 获取月
    // 是在写一个月的函数吗
        this.getCol1_1_2(document.querySelector("#row1_col_1"),"1.1黑名单综合统计分析-行业折线图(家)")
      }
    },
    // 1.1.1 全部年份 x-年份 2015~2035
    async getCol1_1_1(domName, title) {
      // 这个是接口使用的案例  一会你可以试试  小陈的接口
      // 接口举例 基地址在环境变量里 thia.$http 是发起请求
      // const res = await this.$http.get('/api/public/v1/home/swiperdata')
      // console.log(res)
      const { data } = await this.$http.get("http://172.16.1.170:8080/cxdsj/dsjAction.zcndSelect.do");// 直接获取全部的  这个是吗
      // console.log('1.1.1 年份', data);
      let res = data.substring(5);
      let newRes = eval("(" + res + ")");
      // console.log("1.1.1 年份", newRes);
      // 定义排序规则方法
      function sortYear(a, b) {
        return a.year - b.year;
      }
      // 数组排序方法 sort
      newRes.sort(sortYear); // 执行完这一行就排完序了  newRes就是排好后的
      let cxndzcAll = newRes;
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: "1.1诚信企业注册-年度折线图(家)",
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              // left: '2%',
              // top: '20%',
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        // 提示框组件
        tooltip: {
          trigger: "axis",
        },
        // 图例
        legend: {
          show: true,
          data: ["诚信注册数"],
        },
        // 网格区域
        grid: {
          // 折线图的大小
          top: "25%",
          left: "3%",
          right: "4%",
          bottom: "15%",
          // 显示边框
          show: true,
          // 边框颜色
          borderColor: "#2f89cf",
          // 包含刻度文字在内
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false, //去除轴内间距
          // data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025',
          //   '2026', '2027', '2028', '2029', '2030', '2031', '2032', '2033', '2034', '2035'],
          data: cxndzcAll.map((item) => {
            return item.year;
          }),
          // 坐标轴刻度
          axisTick: {
            show: false, // 去除刻度线
          },
          // 坐标轴刻度
          axisLabel: {
            // color: '#4c9bfd',//刻度标文字签颜色
            color: "#fff",
            interval: "0",
          },
          // 轴线
          axisLine: {
            show: false, //去除轴线
          },
        },
        yAxis: {
          type: "value",
          // 坐标轴刻度
          axisTick: {
            show: false, // 去除刻度线
          },
          splitNumber: 5,
          // 坐标轴刻度
          axisLabel: {
            // color: '#4c9bfd'//刻度标文字签颜色
            color: "#fff",
          },
          // 轴线
          axisLine: {
            show: false,
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        // 折线颜色
        color: ["#ed3f35"],
        // 滚动条
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 50,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "注册数",
            type: "line",
            stack: "Total",
            // data: [124, 140, 101, 134, 190, 230, 210, 230, 120, 230, 210, 120, 134, 190, 230, 210, 230, 120, 230, 210, 120],
            data: cxndzcAll.map((item) => {
              return item.num;
            }),
            // 折线为圆滑的曲线
            smooth: true,
          },
        ],
      };
      // 配置给实例对象
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 1.1.2 月份  传参
    async getCol1_1_2(domName, title) {
      const {data} = await this.$http.get('http://172.16.1.170:8080/cxdsj/dsjAction.cxndzcSelect.do',  { params: { years: this.value } })
      // console.log('1.1.2月份', data);
      const newRes = eval("(" + data + ")")
      // console.log('1.1.2月份', newRes);
      let cxndzc = newRes[0].data
      const myChart = echarts.init(document.querySelector("#row1_col_1"));
      // 指定配置
      var option = {
        title: {
      text: '1.1诚信企业注册-年度折线图(家)',
      textStyle: {
        color: '#8fc4ff',
        fontsize: '20px',
        fontweight: 'bolder',
        fontStyle: 'normal'
      },
      top: '3%',
      left: 'center'
        },
        toolbox: {
      feature: {
        // saveAsImage: { show: true }, // 导出图片
        myFull: { // 全屏
          show: true,
          title: '全屏',
          icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
          onclick: () => {
            // 全屏查看
            if (domName.requestFullScreen) { // HTML W3C 提议
              domName.requestFullScreen()
             
              myChart.setOption(option)
            } else if (domName.msRequestFullscreen) { // IE11
              domName.msRequestFullScreen()
              domName.requestFullScreen()
              
            } else if (domName.webkitRequestFullScreen) { // Webkit
              domName.webkitRequestFullScreen()
              domName.requestFullScreen()
              
            } else if (domName.mozRequestFullScreen) { // Firefox
              domName.mozRequestFullScreen()
              domName.requestFullScreen()

            }
            // 退出全屏
            if (domName.requestFullScreen) {
              document.exitFullscreen()
            } else if (domName.msRequestFullScreen) {
              document.msExitFullscreen()
            } else if (domName.webkitRequestFullScreen) {
              document.webkitCancelFullScreen()
            } else if (domName.mozRequestFullScreen) {
              document.mozCancelFullScreen()
            }
          }
        }
      }
        },
        // 提示框组件
        tooltip: {
      trigger: 'axis'
        },
        // 图例
        legend: {
      show: true,
      data: ['诚信注册数'],
        },
        // 网格区域
        grid: {
      // 折线图的大小
      top: '25%',
      left: '3%',
      right: '4%',
      bottom: '10%',
      // 显示边框
      show: true,
      // 边框颜色
      borderColor: '#2f89cf',
      // 包含刻度文字在内
      containLabel: true
        },
        xAxis: {
      type: 'category',
      boundaryGap: false,//去除轴内间距
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      // 坐标轴刻度
      axisTick: {
        show: false,    // 去除刻度线
      },
      // 坐标轴刻度
      axisLabel: {
        //  color: '#4c9bfd',//刻度标文字签颜色
        color: '#fff',
        interval: '0'
      },
      // 轴线
      axisLine: {
        show: false //去除轴线
      },
        },
        yAxis: {
      type: 'value',
      // 坐标轴刻度
      axisTick: {
        show: false,    // 去除刻度线
      },
      splitNumber: 5,
      // 坐标轴刻度
      axisLabel: {
        //  color: '#4c9bfd'//刻度标文字签颜色
        color: '#fff',
      },
      // 轴线
      axisLine: {
        show: false,
      },
      // 分割线
      splitLine: {
        lineStyle: {
          color: '#012f4a'
        }
      }
        },
        // 折线颜色
        color: ['#ed3f35'],
        "dataZoom": [{
      "show": true,
      "height": 12,
      "xAxisIndex": [
        0
      ],
      bottom: '5%',
      "start": 0,
      "end": 50,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
        color: "#d3dee5",

      },
      textStyle: {
        color: "#fff"
      },
      borderColor: "#90979c"
    }, {
      "type": "inside",
      "show": true,
      "height": 15,
      "start": 1,
      "end": 35
        }],
        series: [
      {
        name: '注册数',
        type: 'line',
        stack: 'Total',
        // data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        data: cxndzc[0],
        // 折线为圆滑的曲线
        smooth: true,
      },
        ]
      };

      // 配置给实例对象
      myChart.setOption(option)
   },

    // 1.2  这个你仿照 第一个写  记得 接口返回的数据 要放到外面的 data 里  定义了不会执行  所以要在页面初始完执行
    async getCol2(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.sszcSelect.do"
      );
      // console.log(data);
      let cityzc = eval("(" + data + ")");
      // console.log("1.2", cityzc);
      const myChart = echarts.init(document.querySelector("#row1_col_2"));
      // // 2.指定配置
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          // 坐标轴指示器 坐标轴触发有效
          axisPointer: {
            // 默认为line
            // shadow 阴影
            // type: 'shadow'
            type: "line",
          },
        },
        color: ["#2f89cf"],
        //  修改柱状图的大小
        grid: {
          left: "2%",
          top: "20%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: [
            //   '邯郸',
            //   '沧州',
            //   '石家庄',
            //   '唐山',
            //   '保定',
            //   '衡水',
            //   '邢台',
            //   '廊坊',
            //   '张家口',
            //   '承德',
            //   '雄安新区',
            //   '秦皇岛',
            //   '辛集',
            //   '定州'
            // ],
            data: cityzc.city, // 这里也没有啊
            // 坐标轴刻度标签
            axisLabel: {
              color: "rgba(255, 255, 255, .6)",
              fontSize: "11",
              color: "#fff",
              interval: "0",
              rotate: "-60",
            },
            axisTick: {
              alignWithLabel: true,
            },
            //x轴线样式不显示
            axisLine: {
              interval: "0",
              show: false,
              // 如果想要单独的线条样式
              // lineStyle: {
              // color: 'raba(255, 255, 255, .1)',
              // width:1,
              // type: 'solid'
              // }
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "rgba(255, 255, 255, .6)",
              fontSize: "12",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, .1)",
                width: 2,
                type: "solid",
              },
            },
            // y轴分割线
            splitLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, .1)",
              },
            },
          },
        ],
        series: [
          {
            name: "诚信注册数",
            type: "bar",
            // 柱子宽度
            barWidth: "35%",
            // data: [
            //   4996, 4994, 3738, 3629, 3475, 3286, 2384, 2293, 1156, 1022, 779, 713,
            //   360, 271
            // ],
            data: cityzc.num, // zheli meiyou
            // 项目样式
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      };
      // // 3.把配置项给实例对象
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    // 1.3
    async getCol3(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.hyzcSelect.do"
      );
      // console.log('1.3' , data);
      let res = data.substring(5);
      let hycxzc = eval("(" + res + ")");
      // console.log("1.3", hycxzc);
      const myChart = echarts.init(domName);
      myChart.setOption({
        title: {
          text: "1.3诚信企业注册-行业折线图(家)",
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "20%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
              interval: 0,
              rotate: -10,
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            // data: ['A', 'B', 'C', 'D', 'E', 'F'],
            data: hycxzc.map((item) => {
              return item.name;
            }),
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        // 滚动条
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 40,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "注册数",
            type: "line",
            // smooth: true, //是否平滑
            // showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 13,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 2,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,202,149,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,202,149,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 20,
              },
            },
            // data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14,],
            data: hycxzc.map((item) => {
              return item.value;
            }),
          },
        ],
      }); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.rowOne {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>
